<template>
    <div>
        <div class="classBox">
            <div class="title" v-for="item in names" :key="item.id">
              <span @click="toGoodsInfo(item.name)">{{item.name}}</span>
              
            </div>
            
        </div>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'classifyNav',
    // components: {},
    props:{
        names:{
            type:Array,
            default:()=>{return []}
        }
    },
        

    data() {
      return {
        // names: [{name:'零食', id:1}, {name:'茶酒', id:2}, {name:'茶酒', id:3}]
      }
    },
    computed: {},
    created() {},
    methods: {
      toGoodsInfo(name){
        
        let routeData = this.$router.resolve({ path:`/goods?class=${name}` }); 
        window.open(routeData.href, '_blank');
    }
    }
  }
  </script>
  <style lang="scss" scoped>
        .classBox{
            width: 100%;
            // min-width: 970px;
            height: 35px;
            // background-color: #F2F2F2;
            display: flex;
            // justify-content: flex-start;
            align-items: center;
            font-size: 0.8rem;
            color: rgb(75, 72, 72);
            text-align: center;
            div{
                
                margin-left: 20px;
                cursor:pointer;
            }
            div:hover{
                    color: rgb(131, 199, 225);
                }
        }
  </style>
  